<template>
    <div class="hisory-list">
        <div class="header">{{ header }}</div>
        <div class="scroll-list">
            <vue3-seamless-scroll :list="list" :hover="scrollListItemHover" :step="scrollListStep" >
             <template v-slot="{ data }">
                <!-- <span style="width: 100%; display: block; line-height: 30px;">
                    <div>{{ data.name }}</div>
                </span> -->
                <div class="list-item" @click="handleItemClick(data)">
                    <div class="list-item-row">
                        <!-- icon -->
                         <span class="list-item-icon"></span>
                         <!-- 文件类别 -->
                        <span>{{ data.title }}</span>
                    </div>
                    <div class="list-item-row description">{{ data.description }}</div>
                </div>
            </template>
            </vue3-seamless-scroll>
        </div>
    </div>
</template>

<script lang='ts' setup>
    import { ref, computed, defineEmits } from 'vue';
    import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

    interface ListItem {
        id: string | number;
        ['string']?: number | string | undefined;
    }

    defineOptions({
        name: 'dcc-scroll-list'
    });

    const props = defineProps({
        header: {
            type: String,
            default: '',
        },
        dataSource: {
            type: Array<ListItem>,
            default: () => {
                return [];
            }
        }
    });
    const emits = defineEmits(['click']);
    // any 为兼容vue3-seamless-scroll插件的类型
    const list = ref<Array<ListItem> | any>(props?.dataSource);
    const scrollListItemHover = ref<boolean | any>(true);
    const scrollListStep = ref<number | any>(0.5);

    const handleItemClick = (data) => {
        emits('click', data);
    }
</script>

<style scoped lang="less">
    .hisory-list{
        height: 500px;
        position: relative;
        border: 1px solid #0505050f;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 1px 1px -1px #00000029, 0 1px 1px 0 #0000001f, 0 1px 2px 2px #00000017;
        .header{
            padding: 5px;
            font-size: 20px;
            font-weight: 500;
            // background-color: #bdbbbb;
            border-bottom: 1px solid #0505050f;
        }
        .scroll-list{
            height: calc(100% - 40px);
            overflow: hidden;
            padding: 5px;
            background-color: #fff;
            .list-item{
                display: block;
                margin: 10px 0;
                padding: 10px;
                background-color: #f5f5f5;
                border-radius: 4px;
                overflow: hidden;
                box-sizing: border-box;
                cursor: pointer;
                &:hover {
                    box-shadow: 0 1px 2px 2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
                }
                .list-item-row{
                    display: flex;
                    margin-bottom: 5px;
                    .list-item-icon{
                        display:inline-block;
                        width: 30px;
                        height: 30px;
                        margin-right: 5px;
                        border-radius: 50%;
                        background-color: #ccc;
                        overflow: hidden;
                    }
                }
                .description{
                    font-size: 12px;
                    color: #ccc;
                }
            }
        }
    }
</style>